<script setup lang="ts">
import { nextTick, reactive } from "vue";
import { useQiankun } from "./microApp";
import Container from "../../components/Container/Index.vue";
import Slider from "./components/Slider.vue";
import Drawer from "./components/Drawer.vue";

const data: any = reactive({
  state: {},
  actions: {},
  formData: {
    name: "",
    region: "",
  },
});

nextTick(() => {
  const { state, actions }: any = useQiankun({
    a: 1,
  });
  data.state = state;
  data.actions = actions;
});
</script>

<template>
  <Container>
    <div class="editor-container">
      <Slider :state="data.state" :actions="data.actions" />
      <div id="microApp" class="micro-app"></div>
      <Drawer :formData="data.formData" />
    </div>
  </Container>
</template>

<style scoped lang="less">
.editor-container {
  display: flex;
  justify-content: space-between;
  .micro-app {
    width: 375px;
    height: 667px;
    border: 1px solid #000;
    margin: 0 auto;
  }
}
</style>
